<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">付款单新建</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <el-col class="mr20 width100">
                    <el-button
                        class="btn-success width100"
                        type="primary"
                        @click="submitForm('save')"
                    >保存</el-button>
                </el-col>
                <el-col class="mr20 width100">
                    <el-button
                        class="btn-success width100"
                        type="primary"
                        @click="submitForm('confirm')"
                    >确认付款</el-button>
                </el-col>
                <el-col :span="12" class="status-container">
                    <div class="status-item">
                        <span class="active">待付款</span>
                        <span>已付款</span>
                        <span>部分核销</span>
                        <span>已核销</span>
                    </div>
                </el-col>
            </el-row>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="mt30">
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="单据编号:" prop="paymentCode">
                            <el-input v-model="form.paymentCode" placeholder="" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="供应商:" prop="supplierName">
                            <el-input v-model="form.supplierName" placeholder="按名称模糊检索" style="width:82%;" @input="inputSupplierName" />
                            <ul class="options" v-if="show" >
                                <div class="options-item" v-if="supplierNameList.length > 0">
                                    <li @click="check(item)" v-for="item in supplierNameList" :key="item.id">
                                        {{ item.name }}
                                    </li>
                                </div>
                            </ul>
                            <el-button type="primary" size="small" class="btn-success" icon="el-icon-search" style="position:absolute;right:0;top:0;bottom:0;width:15%;font-size:14px;" @click="onSupplierNameList"></el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="付款方式:" prop="paymentMethod">
                            <el-select v-model="form.paymentMethod" placeholder="请选择" style="width:100%;" @change="onPaymentMethod">
                                <el-option label="银行" value="1">银行</el-option>
                                <el-option label="现金" value="2">现金</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="付款类型:" prop="paymentType">
                            <el-select v-model="form.paymentType" placeholder="请选择" style="width:100%;">
                                <el-option label="采购货款" value="1">采购货款</el-option>
                                <el-option label="采购退货" value="2">采购退货</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <template v-if="form.paymentMethod == '1'">
                        <el-col :span="9">
                            <el-form-item label="付款银行:" prop="paymentBank">
                                <el-input v-model="form.paymentBank" placeholder="" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="付款账号:" prop="paymentAccount">
                                <el-input v-model="form.paymentAccount" placeholder="" />
                            </el-form-item>
                        </el-col>
                    </template>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="金额（元）:" prop="money">
                            <el-input v-model="form.money" placeholder="" @blur="inputMoney" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="金额大写:" prop="amountOfCapital">
                            <el-input v-model="form.amountOfCapital" placeholder="" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="备注:" prop="remark">
                            <el-input v-model="form.remark" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 供应商列表 -->
        <el-dialog :visible.sync="supplierShow" width="90%" top="50px" append-to-body center>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        type="info"
                        icon="el-icon-sort"
                        size="mini"
                        @click="toggleExpandAll"
                    >展开/折叠</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-table v-if="refreshTable" v-loading="loading" :data="supplierlist" row-key="id"
                        :default-expand-all="isExpandAll"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                    >
                        <el-table-column prop="sortName" label="分类名称" width="150">
                            <template slot-scope="scope">
                                <span @click="handleItem(scope.row)" style="cursor:pointer">{{ scope.row.sortName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sortCode" label="分类编码" align="center" />
                    </el-table>
                </el-col>
                <el-col :span="1">
                    <div class="line"></div>
                </el-col>
                <el-col :span="15">
                    <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
                        <el-form-item prop="searchValue">
                            <el-input
                                v-model="queryParams.searchValue"
                                placeholder="名称或者编码模糊查询"
                                clearable
                                size="small"
                                @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="list-search btn-success" color="#5ED4D4">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="list-search">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table v-loading="loading" :data="searchSupplierList" @row-click="handleSupplier">
                        <el-table-column label="序号" type="index" align="center" width="50">
                            <template slot-scope="scope">
                                <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="编码" align="center" prop="supCode" :show-overflow-tooltip="true" width="150" />
                        <el-table-column label="名称" align="center" prop="name" :show-overflow-tooltip="true" width="150" />
                        <el-table-column label="简称" align="center" prop="shortName"  :show-overflow-tooltip="true" />
                        <el-table-column label="助记码" align="center" prop="mnemonicCode" :show-overflow-tooltip="true" width="150" />
                        <el-table-column label="供应商分类" align="center" prop="sortId" :show-overflow-tooltip="true" width="100" />
                        <el-table-column label="营业执照编号" align="center" prop="businessLicense" :show-overflow-tooltip="true" width="150" />
                        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" width="150" />
                    </el-table>
                    <pagination
                        v-show="total > 0"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="handleItem()"
                    />
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import { billsPaymentAdd, billsPaymentUpdate, billsPaymentDetail } from "@/api/system/billsPayment/billsPayment"
import { listSupplier, listSupplierlist } from "@/api/system/basicdata/basicdata"
export default {
    name: "add",
    data() {
        return {
            form: {
                paymentId: '', // 付款单id
                paymentCode: '', // 单据编号
                supplierId: '', // 供应商id
                supplierName: '', // 供应商
                paymentMethod: '1', // 付款方式
                paymentType: '1', // 付款类型
                paymentBank: '', // 付款银行
                paymentAccount: '', // 付款账号
                money: '', // 金额
                amountOfCapital: '', // 金额大写
                remark: '', // 备注
            },
            // 表单校验
            rules: {
                supplierName: [
                    { required: true, message: "供应商不能为空", trigger: "blur" }
                ],
                paymentMethod: [
                    { required: true, message: "付款方式不能为空", trigger: "blur" }
                ],
                paymentType: [
                    { required: true, message: "付款类型不能为空", trigger: "blur" }
                ],
                money: [
                    { required: true, message: "金额不能为空", trigger: "blur" }
                ]
            },
            supplierNameList: [],
            show: false,
            supplierShow: false,
            // 遮罩层
            loading: true,
            // 表格树数据
            supplierlist: [],
            // 是否展开，默认全部展开
            isExpandAll: true,
            // 重新渲染表格状态
            refreshTable: true,
            // 供应商列表
            searchSupplierList: [],
            // 查询参数
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                sortId: 1,
                approveStatus: 1,
                status: 1,
                searchValue: undefined
            }
        }
    },
    methods: {
        // 获取详细信息
        getDetail(){
            billsPaymentDetail(this.form.paymentId).then(res => {
                if(res.code == 200){
                    this.form = res.data
                }
            })
        },
        // 按名称模糊检索
        inputSupplierName(val){
            if(val !== ''){
                this.show = true
                // 查询供应商列表
                listSupplier({ searchValue: val }).then(res => {
                    if(res.code == 200){
                        this.supplierNameList = res.rows
                    }
                })
            }else{
                this.show = false
            }
        },
        // 选中客户
        check(item) {
            this.form.supplierId = item.id
            this.form.supplierName = item.name
            this.show = false
        },
        // 供应商分类列表弹窗
        onSupplierNameList(){
            this.show = false
            this.supplierShow = true
            this.resetForm("queryForm")
            this.getList()
            this.handleItem()
        },
        // 获取列表
        getList() {
            this.loading = true
            listSupplierlist().then(res => {
                this.supplierlist = this.handleTree(res.rows, "id")
                this.loading = false
            })
        },
        // 转换供应商分类数据结构 
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children
            }
            return {
                id: node.id,
                label: node.sortName,
                children: node.children
            }
        },
        // 展开/折叠
        toggleExpandAll() {
            this.refreshTable = false
            this.isExpandAll = !this.isExpandAll
            this.$nextTick(() => {
                this.refreshTable = true
            })
        },
        // 根据分类查看供应商
        handleItem(item){
            if(item !== undefined){
                this.queryParams.sortId = item.id
            }
            listSupplier(this.addDateRange(this.queryParams)).then(res => {
                this.searchSupplierList = res.rows
                this.total = res.total
                this.getSupplierlist()
            })
        },
        getSupplierlist(){
            listSupplierlist().then(res => {
                this.searchSupplierList.forEach(item => {
                    let arr = res.rows.find(e =>{
                        return e.id == item.sortId
                    })
                    if(arr != undefined){
                        item.sortId = arr.sortName
                    }
                })
            })
        },
        // 搜索按钮
        handleQuery() {
            this.queryParams.pageNum = 1
            this.handleItem()
        },
        // 重置按钮
        resetQuery() {
            this.resetForm("queryForm")
            this.handleQuery()
        },
        // 选中供应商
        handleSupplier(row) {
            this.supplierShow = false
            this.form.supplierId = row.id
            this.form.supplierName = row.name
        },
        // 付款方式
        onPaymentMethod(){
            this.form.paymentBank = ''
            this.form.paymentAccount = ''
        },
        // 金额验证
        inputMoney(e){
            if(/^(([1-9]{1}\d*)|(0{1}))((.\d{0,2})?)$/.test(e.target.value) == false){
                this.$modal.msgError('请输入正确的金额！')
                this.form.money = ''
                this.form.amountOfCapital = ''
                return false
            }else{
                if(e.target.value == '0'){
                    this.$modal.msgError('金额必须大于0!')
                    this.form.money = ''
                    this.form.amountOfCapital = ''
                }else{
                    // 金额转换大写
                    this.form.amountOfCapital = this.numberToChinese(e.target.value)
                }
            }
        },
        // 按钮
        submitForm(e){
            if(e == 'save'){
                if(this.form.paymentId){
                    let arr = this.form
                    arr.status = '1'
                    billsPaymentUpdate(arr).then(res => {
                        if(res.code == 200){
                            this.$modal.msgSuccess("保存成功")
                            this.getDetail()
                        }
                    })
                }else{
                    let arr = this.form
                    arr.status = '1'
                    billsPaymentAdd(arr).then(res => {
                        if(res.code == 200){
                            this.form = res.data
                            this.$modal.msgSuccess("保存成功")
                        }
                    })
                }
            }else{
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if(this.form.supplierId == ''){
                            this.$modal.msgError('请选择正确的供应商信息!')
                        }else{
                            if(this.form.paymentId){
                                let arr = this.form
                                arr.status = '2'
                                billsPaymentUpdate(arr).then(res => {
                                    if(res.code == 200){
                                        this.$modal.msgSuccess("操作成功")
                                        this.$tab.closeOpenPage({ path: "/billsPayment/list" })
                                    }
                                })
                            }else{
                                let arr = this.form
                                arr.status = '2'
                                billsPaymentAdd(arr).then(res => {
                                    if(res.code == 200){
                                        this.$modal.msgSuccess("操作成功")
                                        this.$tab.closeOpenPage({ path: "/billsPayment/list" })
                                    }
                                })
                            }
                        }
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
.options {
    position: absolute;
    z-index:10;
    left:0;
    width:82%;
}
.options li {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    border: 1px solid #DCDFE6;
    border-top: 0px;
    text-indent: 12px;
    overflow: hidden;
}
.options li:hover {
    background: #f3f5f9;
    color: #606266;
}
.options-item{
    background:#fff;
    overflow-y:scroll;
    max-height: 200px;
}
</style>